import React from 'react';
import { withStyles, createStyles } from "@material-ui/core/styles";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import $ from 'jquery';
import Button from '@material-ui/core/Button';
import EditIcon from '@material-ui/icons/Edit';
import Grid from '@material-ui/core/Grid';
import { withRouter } from 'react-router-dom'

const useStyles = createStyles({
    table: {
        minWidth: 650,
    },
});

/**
 * 展示课程信息的表格
 */
class CourseTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            url: this.props.url,
            term: this.props.term,
            usernumber: this.props.usernumber,
            data: [],
            thead: [
                '学期',
                '课程名',
                '课程类型',
                '录入状态',
                '操作'
            ],
            //状态对照表
            status: {
                0: '未录入',
                1: '已录入',
                2: '暂存'
            }
        };


    }

    /**
     * 初始化数据
     */
    componentDidMount() {

        $.ajax({
            type: "POST",
            url: this.state.url,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                usernumber: this.state.usernumber,
                password: this.state.term,//写作password，传入的就是学期，没写错，接口是这么写的(¬_¬)
            }),
            dataType: "json",
            success: function (newdata) {
                if (newdata) {
                    this.setState({
                        data: newdata
                    });
                    console.log(newdata);
                } else {
                    alert("目前没有数据");
                }
            }.bind(this),
            error: function (message) {
                alert("数据获取失败");
            }
        });
    }

    /**
     * 处理“录入成绩”按钮点击事件
     * @param {当前行的下标值} index 
     */
    handleInputBtnClick = (event,index)=>{
        let row = this.state.data[index];//当前行数据
        //路由跳转
        this.props.history.push({
            pathname:'/classTable',
            query:row
        });

    }


    render() {
        const { classes } = this.props;
        return (
            <TableContainer component={Paper}>
                <Table className={classes.table} aria-label="simple table">
                    {/**表头 */}
                    <TableHead>

                        <TableRow>
                            {this.state.thead.map(
                                (item, index) =>
                                    <TableCell key={index}>{item}</TableCell>
                            )}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {this.state.data.map((row,index) => (
                            <TableRow key={row._id}>
                                <TableCell >{row.term}</TableCell>
                                <TableCell >{row.coursename}</TableCell>
                                <TableCell >{row.coursekind}</TableCell>
                                <TableCell >{this.state.status[row.status]}</TableCell>
                                <TableCell >
                                    <Grid container spacing={1}>
                                        <Grid item>
                                            <Button
                                                variant="contained"
                                                color="primary"
                                                className={classes.button}
                                                endIcon={<EditIcon>send</EditIcon>}
                                                onClick={(e)=>this.handleInputBtnClick(e,index)}
                                            >
                                                录入成绩
                                            </Button>
                                        </Grid>
                                        <Grid item>
                                            <Button
                                                variant="contained"
                                                color="primary"
                                                className={classes.button}
                                                endIcon={<EditIcon>send</EditIcon>}
                                            >
                                                成绩分析
                                        </Button>
                                        </Grid>
                                    </Grid>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        );
    }
}
export default withRouter(withStyles(useStyles)(CourseTable));
